/*
  学习目标：props指定默认值 
  关键词 ： 组件.defaultProps = {}
*/
import React from 'react';
// 1. 引进props-types
import PropTypes from 'prop-types';
class App extends React.Component {
  render() {
    return (
      <div>
        我是app父组件
        <Child
          str="字符串"
          arr={[]}
          bl={false}
          fn={() => {}}
          obj={{ name: 'zs' }}
          student={{ name: 'zs', age: 20 }}
          jsx={<div>jsx</div>}
        ></Child>
      </div>
    );
  }
}

// 函数组件校验和默认值和 类组件完全一样
// 但是函数组件 默认值，一般我们都习惯在 参数中解构，给默认值
function Child({ str = '解构默认值', num = 5000 }) {
  return (
    <div>
      我是Child子组件 - {str} - {num}
    </div>
  );
}
// 函数组件默认值
// Child.defaultProps = {
//   str: '默认的str',
//   num: 10000,
// };

// 函数组件，校验规则是相同的写法
Child.propTypes = {
  str: PropTypes.string.isRequired,
  num: PropTypes.number,
  arr: PropTypes.array,
  // 注意 bool 和 func 的写法
  bl: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.object,
  student: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  jsx: PropTypes.element,
};
// class Child extends React.Component {
//   // 通过 static 把 默认值和校验规格都写在 class 里面，方便维护
//   static defaultProps = {
//     str: '默认的str',
//     num: 9999,
//   };
//   static propTypes = {
//     str: PropTypes.string.isRequired,
//     num: PropTypes.number,
//     arr: PropTypes.array,
//     // 注意 bool 和 func 的写法
//     bl: PropTypes.bool,
//     fn: PropTypes.func,
//     obj: PropTypes.object,
//     student: PropTypes.shape({
//       name: PropTypes.string,
//       age: PropTypes.number,
//     }),
//     jsx: PropTypes.element,
//   };
//   render() {
//     return (
//       <div>
//         我是Child子组件 - {this.props.str} - {this.props.num}
//       </div>
//     );
//   }
// }

// 设置 props 的默认值
// Child.defaultProps = {
//   str: '默认的str',
//   num: 10000,
// };

// 给组件设置校验规则，注意属性名是小写
// 1. 常见类型：array、number、string、bool、func、object
// 2. 特定结构的对象：shape
// 3. React元素类型：element
// 3. 必填项：isRequired
// Child.propTypes = {
//   str: PropTypes.string.isRequired,
//   num: PropTypes.number,
//   arr: PropTypes.array,
//   // 注意 bool 和 func 的写法
//   bl: PropTypes.bool,
//   fn: PropTypes.func,
//   obj: PropTypes.object,
//   student: PropTypes.shape({
//     name: PropTypes.string,
//     age: PropTypes.number,
//   }),
//   jsx: PropTypes.element,
// };

export default App;
